<template>
  <div class="slot">
    <!--默认插槽-->
    <h2>默认插槽：</h2>
    <div class="card-box">
      <Category :title="'热门游戏'">
        <ul>
          <li v-for="item in games" :key="item.id">{{ item.name }}</li>
        </ul>
      </Category>

      <Category :title="'热门美食'">
        <img :src="imgUrl" alt="" />
      </Category>

      <Category :title="'热门电影'">
        <!--<video :src="videoUrl"></video>-->
        <video :src="videoUrl" controls></video>
      </Category>
    </div>

    <!--默认插槽-->
    <h2>作用域插槽：</h2>
    <p>子组件有数据，但是想在父组件中按不同的方式使用。eg：1. ul>li。 2. ol>li。 3. h3标签包裹。</p>
    <p>数据在子组件中。</p>
    <div class="card-box">
      <Game>
        <!--<template slot-scope="scope">-->
        <template v-slot="scope">
          <ul>
            <li v-for="item in scope.games">{{ item.name }}</li>
          </ul>
        </template>
      </Game>
      <Game>
        <template v-slot="row">
          <ol>
            <li v-for="item in row.games">{{ item.name }}</li>
          </ol>
        </template>
      </Game>
      <Game>
        <template #default="{ games }">
          <h2 v-for="item in games">{{ item.name }}</h2>
        </template>
      </Game>
    </div>
  </div>
</template>
<script setup lang="ts">
import Category from '@views/communication/09_slot/components/Category.vue'
import Game from '@views/communication/09_slot/components/Game.vue'

const games = reactive([
  { id: '1', name: '英雄联盟' },
  { id: '2', name: '王者农药' },
  { id: '3', name: 'Dota' },
])
const imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
const videoUrl = ref(
  'https://vd4.bdstatic.com/mda-re9nyt98py0daqhs/360p/h264/1746893770700421248/mda-re9nyt98py0daqhs.mp4',
)
</script>
<style scoped>
.slot {
}

.card-box {
  display: flex;
}

.category {
  margin: 10px 20px;
}

img,
video {
  width: 100%;
}
</style>
